<{extends file="layout.tpl"}>

<{block name=css}>
<style type="text/css">
	.m-area-default li:after{
		content: '';
		display: block;
		clear: both;
	}
	.m-area-default li{ line-height: 24px; margin: 10px 0; }
	.m-area-default li:last-child{ text-align: center; margin-top: 30px; }
	.m-area-default .form-control{ display: inline-block; width: 240px; margin-right: 8px; }
	.m-area-default .inputDate{ 
		display: inline-block;
		width: 80px;
		padding-left: 2px;
		margin-right: 8px;
		border-radius: 2px;
		border: 1px solid #dcdcdc;
		line-height: 24px;
		transition: border-color 515ms ease-in-out;
	}
	.m-area-default .inputDate:focus{
		outline: none;
		border-color: #2580A2;
	}
	.m-area-title{ 
		background: #2580A2; 
		color: #fff; 
		line-height: 34px;
		padding-left: 8px;
		margin-top: 20px;
	}
	input[type="radio"], input[type="checkbox"]{ position: relative; top: 2px; left: -2px; }
</style>
<{/block}>


<{block name=content}>
<section class="m-panel-box">
	<h4>配置文件信息</h4>
	<div class="m-panel-body">
		<div>
		<form class="infoForm">
				<ul class="m-area-default">
					<li class="m-area-title">服务器信息</li>
					<li>
						<div class="col-md-4">服务器名称</div>
						<div class="col-md-8">
							<input type="text" name="server_name" class="form-control">
						</div>
					</li>
					<li>
						<div class="col-md-4">描述</div>
						<div class="col-md-8">
							<textarea class="form-control" name="server_description"></textarea>
						</div>
					</li>
					<li class="m-area-title">服务器类型</li>
					<li>
						<div class="col-md-4">DEFAULT_TTL_NS</div>
						<div class="col-md-8">
								<input type="radio" name="server_type" value="api" checked>API(supports bind)
						</div>
					</li>
					<li>
						<div class="col-md-4">API认证秘钥</div>
						<div class="col-md-8">
							<input type="text" name="api_auth_key" class="form-control">验证密钥，使绑定配置生成脚本可以回传到NamedManager
						</div>
					</li>
					<li class="m-area-title">服务器域设置</li>
					<li>
						<div class="col-md-4">名称服务器组</div>
						<div class="col-md-8">
							<div class="serverDetail"></div>
						</div>
					</li>
					<li>
						<div class="col-md-4">主名称服务器</div>
						<div class="col-md-8">
							<input type="checkbox" name="server_primary">使此服务器成为用于DNS SOA记录的主要服务器。
						</div>
					</li>
					<li>
						<div class="col-md-4">用作NS记录*</div>
						<div class="col-md-8">
							<input type="checkbox" name="server_record">将此名称服务器作为公共NS记录添加到所有域
						</div>
					</li>
					<li><span class="btn btn-md btn-primary saveConfig">保存设置</span></li>
				</ul>
			</form>
		</div>
	</div>
</section>
<{/block}>

<{block name=js}>
<script type="text/javascript">
	function loadServerGroup(){
		ajaxObj('/NameServers/getGroupList', 'get', '', function(obj){
			var group = '';
			obj.map(function(data){
				group += `<div class="box">
										<input type="radio" 
											name="id_group" 
											value="${data.id}">
										${data.group_name}-${data.group_description}
									</div>`
			})
			$(".serverDetail").append(group);
			$(".serverDetail input:first")[0].checked = true;
		})
	}

	loadServerGroup();

	$('.saveConfig').click(function(){
		var obj = {};
		var isAllow = true;
		$('.infoForm input').each(function(index, data){
			if($(data).val() == ''){
				isAllow = false;
				$(data).focus();
				layer.tips('此项为必填项！', $(data));
				return false;
			}
			var type = $(data).attr('type');
			if(type == 'radio'){
				if($(data)[0].checked){
					obj[$(data).attr('name')] = $(data).val()
				}
			}else if(type == 'checkbox'){
				obj[$(data).attr('name')] = $(data)[0].checked  ? 1 : 0;
			}else{
				obj[$(data).attr('name')] = $(data).val()
			}
		})
		if(isAllow){
			obj.server_description = $('[name="server_description"]').val();
			console.log(obj);
			ajaxObj('/NameServers/addData', 'post', obj, function(obj){
				layer.msg(obj.msg);
				$('.infoForm')[0].reset();
			})
		}
	})
</script>
<{/block}>